<template>
  <div>
    <!-- 发现歌单头部区域 -->
    <item-music-top :playlist="state.playlist" />
    <!-- 发现歌单列表区域 -->
    <item-music-list :itemList="state.itemList" :subscribedCount="state.playlist.subscribedCount" />
  </div>
</template>

<script>
import {useRoute} from 'vue-router'
import {onMounted,reactive} from 'vue'
import {getMusicDetailList,getMusiclList} from '@/api/item.js'
import ItemMusicTop from '../components/item/ItemMusicTop.vue'
import ItemMusicList from '../components/item/ItemMusicList.vue'

export default {
  components: { ItemMusicTop, ItemMusicList },
    setup(){
        const state=reactive({
            playlist:{},//歌单详情的数据
            itemList:[]//歌单歌曲的数据
        })
        onMounted(async()=>{
            // console.log(useRoute());查看路由中的信息
            let id=useRoute().query.id
            // console.log(id);
            // 获取歌单的详情
            const {data:res}=await getMusicDetailList(id)
            // console.log(res);
            state.playlist=res.playlist

             // 获取歌单的歌曲数据
            const {data:result}=await getMusiclList(id)
            // console.log(result);
            state.itemList=result.songs
            // console.log(state.itemList);
            // 防止数据丢失，将数据存放到本地 sessionStorage.setItem('itemDetial',)
            sessionStorage.setItem('itemDetail',JSON.stringify(state))

            
        })
        return {state}
    }

}
</script>

<style>

</style>